<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<jsp:include page="/share/top.jsp"/>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/plugins/layui/css/layui.css?version=1">
    <script src="/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="/plugins/layui/layui.js"></script>
    <script type="text/javascript" src="/js/core/helper.js"></script>
    <link href="/css/global.css?version=4" rel="stylesheet" type="text/css"/>
</head>

<div class="box box-primary">
    <div class="box-frame">
        <div class="layui-tab layui-tab-brief" lay-filter="tableFilter">
            <div class="layui-inline">
                小区名称
                <div class="layui-input-inline">
                    <input name="comm_name" id="comm_name" lay-verify="required" autocomplete="off" class="layui-input"
                           type="text">
                </div>
            </div>
            <div class="layui-inline" style="margin-left:50px">
                <div class="layui-input-inline">
                    <button class="layui-btn layui-btn-normal layui-btn-radius" onclick="queryResourceList();">查询
                    </button>
                </div>
            </div>
            <hr/>
            <div class="table-responsive">
                <table class="layui-table table" cellpadding="0" cellspacing="0">
                    <col width="150px"/>
                    <col width="150px"/>
                    <col/>
                    <col width="150px"/>
                    <thead>
                    <tr>
                        <th>小区编号</th>
                        <th>小区名</th>
                        <th>当前广告图片</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="tbody">

                    </tbody>
                </table>
            </div>
            <div id="page"></div>
            <div style="clear: both"></div>
        </div>
    </div>
</div>
<jsp:include page="/share/foot.jsp"/>
<SCRIPT language="javascript">
    $(document).ready(function () {
    });

    layui.use(['layer', 'form', 'upload', 'laypage'], function () {
        queryResourceList();
    });

    var modelParam = {};
    modelParam.pageSize = 2;
    modelParam.page = 1;

    function queryResourceList() {
        var param = {};
        param.commName = $('#comm_name').val();
        param.typeCode = 'outdoor_image_ads';
        param.pageSize = modelParam.pageSize;
        param.page = 1;

        postJson("/cms/resource/findResourceByComm.x", $.param(param), function (ret) {
            var data = ret.data;
            $('#tbody').empty();
            render(data.list);
            layui.laypage({
                cont: 'page'
                , pages: Math.ceil(data.size / modelParam.pageSize)
                , jump: function (row, first) {
                    if (!first) {
                        param.page = row.curr;
                        modelParam.page = row.curr;
                        queryPage(param);
                    }
                }
            });
        });
    }

    function queryCurrentResource() {
        var param = {};
        param.commName = $('#comm_name').val();
        param.typeCode = 'outdoor_image_ads';
        param.pageSize = modelParam.pageSize;
        param.page = modelParam.page;
        queryPage(param);
    }

    function queryPage(param) {
        postJson("/cms/resource/findResourceByComm.x", $.param(param), function (ret) {
            $('#tbody').empty();
            render(ret.data.list);
        });
    }

    function render(list) {
        modelParam.list = list;
        for (var i in list) {
            var row = list[i];
            var tr = $("<tr></tr>");
            tr.appendTo($('#tbody'));
            $("<td style='vertical-align:middle'>" + row.comm_code + "</td>").appendTo(tr);
            $("<td style='vertical-align:middle'>" + row.comm_name + "</td>").appendTo(tr);
            var advertising = $("<td style='vertical-align:middle;' class='t3'></td>");
            outterLoop: for (var j = 0; j < 4; j++) {
                var fileName = "OutdoorAdvertising-" + (j + 1);
                for (var k in row.resourceList) {
                    var advRow = row.resourceList[k];
                    if (advRow.description == fileName) {
                        var create_time, url;
                        if (advRow.isApproved == "Y") {
                            create_time = advRow.create_time;
                            url = advRow.icon_url + "?" + Math.random();
                        } else {
                            create_time = "无广告";
                            url = "/pic/upload_ioc.png";
                        }
                        $("<td align='center' style='border: 1px solid #b0c3e3;width:200px;height:200px;'>图片-" + (j + 1) + " <hr>" +
                            " <div class='center' style='width:200px;height:200px;'> <img style='max-height:100%; max-width:100%;' src='" + url + "'/> </div><br> " +
                            "<div><hr>" + create_time +
                            "<br><button class='layui-btn layui-btn-danger layui-btn-small' onclick='deleteResource(\"" + advRow.resource_id + "\")'>删除</button> " +
                            "<button class='layui-btn  layui-btn-small' onclick='redistribution(\"" + advRow.resource_id + "\",\"" + row.comm_code + "\",\"" + row.comm_name + "\",\"" + fileName + "\")'>替换</button> " +
                            "</div>" +
                            "</td>").appendTo(advertising);
                        continue outterLoop;
                    }
                }
                $("<td align='center' style='border: 1px solid #b0c3e3;width:200px;height:200px;'>图片-" + (j + 1) + " <hr>" +
                    " <div class='center' style='width:200px;height:200px;'> <img style='max-height:100%; max-width:100%;' src='/pic/upload_ioc.png'/> </div><br> " +
                    "<div><hr> 无广告" +
                    "<br><button class='layui-btn layui-btn-danger layui-btn-small'>删除</button> " +
                    "<button class='layui-btn  layui-btn-small' onclick='redistribution(null,\"" + row.comm_code + "\",\"" + row.comm_name + "\",\"" + fileName + "\")'>替换</button> " +
                    "</div>" +
                    "</td>").appendTo(advertising);
            }
            advertising.appendTo(tr);
            var last = $("<td align='center' style='vertical-align:middle' class='t4'></td>");
            $("<button class='layui-btn' onclick='notificationUpdate(\"" + row.comm_code + "\")'>通知更新</button>").appendTo(last);
            last.appendTo(tr);
        }
    }

    function redistribution(resourceId, commCode, commName, fileName) {
        //noinspection JSDuplicatedDeclaration
        var resourceId = resourceId != null ? "&resourceId=" + resourceId : "";
        layui.layer.open({
            title: '正在替换[' + commName + ']广告图片',
            type: 2,
            area: ['400px', '350px'],
            fixed: false, //不固定
            maxmin: true,
            content: '/cms/resource/redistribution.x?commCode=' + commCode + '&fileName=' + fileName + resourceId
        });
    }

    function deleteResource(resourceId) {
        layui.layer.confirm('确定要删除？', {
            btn: ['确定', '取消']
        }, function () {
            var param = {};
            param.resource_id = resourceId;
            param.isApproved = "N";
            param.approvedState = "不显示显示门口机广告";
            param.isUpdateTime = true;
            postJson("/cms/resource/approvedState.x", $.param(param), function (data) {
                queryCurrentResource();
                layui.layer.closeAll();
            });
        });
    }

    function notificationUpdate(commCode) {
        var param = {};
        param.commCode = commCode;
        postJson("/cms/resource/notificationUpdate.x", $.param(param), function (ret) {

        });
    }

</SCRIPT>